<script>
import {layer} from "@layui/layui-vue";

export default {
  name: "SysHead",
  data() {
    return {
      //单字段变量+对象变量+数组变量
      isShowMenu: true,
      iconStyleObj:{
        width:"200px",
        height:"60px",
        background:"#AFE63B",
        display:"inline-block"
      }

    }
  },
  methods: {
    logout(){
      // localStorage.removeItem("token");
      const item = localStorage.getItem('currentLoginInfo');
      console.log(item);

      this.$axios.post('/java/user/logout',item).then(res=>{
        console.log(res.data);
        if (res.data.code===200){
          localStorage.removeItem("currentLoginInfo");
          this.$router.push("/login");
        }else {
          console.log(res.data.msg);
          layer.msg(res.data.msg, { icon : 2, time: 1000});
          localStorage.removeItem("currentLoginInfo");
          this.$router.push("/login");
        }
      }).catch(err=>{
        console.log(err)
      })



    },
    //自定义的事件或方法
    fullscreen(val) {
      //全屏 true ,退出全屏false
      console.log(val)
    },
    showMenu(){
      if (this.isShowMenu) {
        this.isShowMenu = false;
        this.iconStyleObj.width='60px';
      }else {
        this.isShowMenu = true;
        this.iconStyleObj.width='200px';
      }
      this.$emit('displayMenu',this.isShowMenu)
    }

  }
}
</script>

<template>
  <div style="position:fixed;top: 0;z-index: 100;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);width: 100%;background-color: bisque">
    <div style="height: 50px;display: inline;line-height: 55px;">


      <div style="display: inline-block;">
<!--        <lay-button border="blue" style="width: 200px">百搭按钮</lay-button>-->

        <div :style="iconStyleObj">
          icon
        </div>

              <lay-button @click="showMenu" style="margin-right: 15px;margin-left: 15px">
                <lay-icon v-if="isShowMenu" type="layui-icon-shrink-right" color="#FF5722" ></lay-icon>
                <lay-icon v-if="!isShowMenu" type="layui-icon-spread-left" color="#FF5722" ></lay-icon>
              </lay-button>





        <!--      <div style="display: inline-block;margin-left: 15px;height: 38px">-->
        <!--        -->
        <!--      </div>-->


      </div>


      <div style="float: right;display: inline-block;margin-right: 10px">

        <lay-input prefix-icon="layui-icon-search"
                   style=" width: 500px;height: 38px;position: relative;top: 3px;margin-left: 15px;margin-right: 15px">
        </lay-input>

        <lay-fullscreen v-slot="{ enter, exit, toggle, isFullscreen }" @fullscreenchange=fullscreen>
          <lay-button type="primary"  @click="toggle()">
            <lay-icon v-if="isFullscreen" type="layui-icon-screen-restore"></lay-icon>
            <lay-icon v-if="!isFullscreen" type="layui-icon-screen-full"></lay-icon>
          </lay-button>
        </lay-fullscreen>

        <!--      <lay-button type="normal">百搭按钮</lay-button>-->

        <lay-button>
          <lay-badge type="dot" ripple>
          <lay-icon type="layui-icon-email"></lay-icon>
            </lay-badge>
        </lay-button>

        <lay-dropdown trigger="hover" updateAtScroll>
          <lay-button>
            <lay-icon type="layui-icon-username"></lay-icon>
            张三
          </lay-button>
          <template #content>
            <lay-dropdown-menu>
              <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
              <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
              <lay-dropdown-menu-item @click="logout" style="color: red">
                <lay-icon type="layui-icon-logout"></lay-icon>
                退出
              </lay-dropdown-menu-item>
            </lay-dropdown-menu>
          </template>
        </lay-dropdown>


      </div>


    </div>
  </div>
</template>

<style scoped>

</style>